<template>
  <div>
    <my-card :is_link="true"></my-card>
    <div v-if="flag == true">
      <van-cell title="赠送优惠卡" size="large" />
      <div class="img_outer">
        <van-image width="100%" height="150" :src="card.r_card_image" />
      </div>
      <van-cell title="商家" :value="card.retailer_name" />
      <van-cell title="优惠卡" :value="card.r_card_name" />
      <van-cell title="面值" :value="card.r_card_amount + ' 元'" />
      <van-cell title="数量" :value="card.r_count + ' 张'" />
      <van-cell title="待激活数量" :value="card.r_unused_count + ' 张'" />
    </div>
    <van-empty :description="errMsg" v-else />
    <div style="margin: 32px 64px" >
      <van-button round block type="info" @click="goBack">返回</van-button>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
// import NavBar from "@/components/NavBar";
import MyCard from "@/components/MyCard";
import { wxRetailerCardGift } from "@/api/card";

export default {
  name: "GiftCardAction",
  components: {
    MyCard,
  },
  computed: {},
  props: ["retailer_id", "card_id"],
  data() {
    return {
      title: this.$route.meta.title,
      errMsg: "",
      flag: false,
      card: {
        retailer_name: "",
        card_name: "",
        card_image: null,
        card_amount: null,
        count: null,
      },
    };
  },
  mounted() {
    this.giftCard();
  },
  methods: {
    // onLoad() {
    //   setTimeout(() => {
    //     this.getPointsByOpenid();
    //   }, 500);
    // },
    goBack() {
      this.$router.push("/card");
    },
    giftCard() {
      const data = {
        retailer_id: this.retailer_id,
        card_id: this.card_id,
        count: this.$route.query.count,
        key: this.$route.query.key,
        pid: this.$route.query.pid,
      };

      wxRetailerCardGift(data)
        .then((res) => {
          const data = res.data;
          if (data.status_code == 200) {
            console.log(data.data);
            this.card = data.data
            this.flag = true
            this.$toast.success(data.message);
          } else {
            this.$toast(data.message);
            this.errMsg = data.message;
            this.flag = false
          }
        })
        .catch(() => {
          this.flag = false
          this.errMsg = "赠送会员卡失败!";
          this.$toast("赠送会员卡失败!");
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>